<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="属性名称:">
            <span>{{ dataInfo.attrName }}</span>
          </el-form-item>
          <el-form-item label="属性类型:">
            <span>{{ formatAttrType(dataInfo.attrType) }}</span>
          </el-form-item>
          <el-form-item label="商户:" v-if="dataInfo.attrType==3">
            <span>{{ dataInfo.businessName }}</span>
          </el-form-item>
          <el-form-item label="字段名称:">
            <span>{{ dataInfo.fieldName }}</span>
          </el-form-item>
          <el-form-item label="字段类型:">
            <span>{{ $Filters.formatFieldType(dataInfo.fieldType) }}</span>
          </el-form-item>
          <el-form-item label="字段选项:">
            <span>{{ dataInfo.fieldOptions }}</span>
          </el-form-item>
          <el-form-item label="对接标识:">
            <span>{{ dataInfo.dockData }}</span>
          </el-form-item>
          <!-- <el-form-item label="对接字段名:">
            <span>{{ dataInfo.dockFieldName }}</span>
          </el-form-item> -->
          <el-form-item label="是否必填:">
            <span>{{ formatRequiredFlag(dataInfo.requiredFlag) }}</span>
          </el-form-item>
          <el-form-item label="是否多选:">
            <span>{{ formatMultiFlag(dataInfo.multiFlag) }}</span>
          </el-form-item>
          <!-- <el-form-item label="是否前置:">
            <span>{{ formatFrontFlag(dataInfo.frontFlag) }}</span>
          </el-form-item> -->
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
        </el-row>
        <div class="tit" v-if="dataInfo.attrType == 1">
          <h2>关联产品信息</h2>
        </div>
        <el-row v-if="dataInfo.attrType == 1">
          <el-table :data="dataInfo.serverList" border >
            <el-table-column type="index" label="序号" align="center" width="100px">
            </el-table-column>
            <el-table-column label="产品图片" align="center" width="100">
              <template slot-scope="scope">
                <div class="img-wrapper">
                  <el-image :src="scope.row.images" alt="" :preview-src-list="[scope.row.images]"></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称"  align="center" width="200">
            </el-table-column>
            <el-table-column prop="introduce" label="产品简介" align="center" width="200">
            </el-table-column>
            <el-table-column label="产品分类" align="center"  width="180">
              <template slot-scope="scope">
                {{scope.row.serverClassifyName}}-{{scope.row.thirdClassifyName}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="原价" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="salePrice" label="售价" align="center" width="100px">
            </el-table-column>
          </el-table>
        </el-row>

        <div class="tit" v-if="dataInfo.attrType == 2">
          <h2>关联平台规则信息</h2>
        </div>
        <el-row v-if="dataInfo.attrType == 2">
          <el-table :data="dataInfo.ruleList" border >
            <el-table-column type="index" label="序号" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="ruleName" label="规则名称"  align="center" width="300">
            </el-table-column>
            <el-table-column prop="ruleCode" label="规则编号" align="center" width="150">
            </el-table-column>
            <el-table-column prop="ruleType" label="规则类型" align="center" width="150" :formatter="formatRuleType">
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center" >
            </el-table-column>
          </el-table>
        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script>
  import AttrApi from '@/api/goods/attr';

export default {
  data() {
    return {
      dataInfo: {},
    };
  },
  computed: {
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      AttrApi.getAttrInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data

      })
    },
    // 规则类型(1.通用规则 2.分类规则 3.产品规则)
    formatRuleType(row, column, cellValue) {
      if (cellValue === 1) {
        return '通用规则'
      } else if (cellValue === 2) {
        return '分类规则'
      } else if (cellValue === 3) {
        return '产品规则'
      }
    },
    formatAttrType(cellValue) {
      if (cellValue === 1) {
        return '分类'
      } else if (cellValue === 2) {
        return '平台规则'
      } else if (cellValue === 3) {
        return '产品'
      }
    },
    formatRequiredFlag(cellValue) {
      if (cellValue === 0) {
        return '非必填'
      } else if (cellValue === 1) {
        return '必填'
      }
    },
    formatMultiFlag(cellValue) {
      if (cellValue === 0) {
        return '单选'
      } else if (cellValue === 1) {
        return '多选'
      }
    },
    formatFrontFlag(cellValue) {
      if (cellValue === 0) {
        return '否'
      } else if (cellValue === 1) {
        return '是'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/goods/attrManagement' })
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.img-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .el-image{
    width: 100%;
    &::v-deep img{
      height:auto
    }
  }
}
</style>
